<template>
  <div>
    <van-card
      v-for="(item,index) in $store.state.carList"
      :key="item.id"
      :num="item.count"
      :title="item.title"
      :price="item.price.toFixed(2)"
      :thumb="item.img"
    >
      <template #footer>
        <van-button size="normal" @click="addItemCount(item)" >加</van-button>
        <van-button size="normal" 
        @click="delItemCount(index,item.count)" 
        >减</van-button>
      </template>
    </van-card>
    <!-- {{$store.state.carList}} -->
  </div>
</template>

<script>
export default {
  methods:{
    addItemCount(item) {
       this.$toast({
        type: "success",
        message:"添加成功"
      })
      this.$store.commit("ADD_CARLIST", {
        item
      })
    },
    delItemCount(index,count) {
      //当数量为一 出现删除弹框
      if (count == 1) {
        this.$dialog
          .confirm({
          title: '提示',
          message: '确定要删除嘛?',
        })
          .then(() => {
            this.$store.commit("REM_CARLIST",{
              index
            })
             this.$toast("删除成功")
          })
          //取消会执行
          .catch(() => {
            // on cancel
            this.$toast("取消删除")
          });
      } else {
        this.$store.commit("DEL_CARLIST",{
          index
        })
      }
     
      
    }
  }
};
</script>

<style></style>
   